<template>
 <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"
      v-for="(item, index) in slides" :key="index">
        <img :src="item.imgUrl" alt="">
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
  name: 'Swiper',
  props: {
    slides: {
      type: Array,
      default () {
        return []
      }
    }
  },

  mounted () { // 需要在挂载完成后进行初始化实列对象
    this.mySwiper = new Swiper(this.$el, {
      direction: 'horizontal', // 垂直切换选项
      loop: true, // 循环模式选项
      autoplay: true,

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination'
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },

      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar'
      }
    })
  },

  watch: {
    slides () {
      this.$nextTick(() => {
        this.mySwiper.update() // swiper实列自带的更新方 法，效果就如再次初始化
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .swiper-container{
      height:210px;
      img{
        width:100%;
      }
  }
</style>
